$(function () {
  // 详情页的渲染渲染
  $.ajax({
    url: "http://localhost:3000/api/list/goods",
    success: (res) => {
      // console.log(location);
      // res = JSON.parse(res);
      res = res.data;
      let i;
      let str = "";
      res.some((val, idx) => {
        i = idx;
        return val.id === location.search.split("=")[1];
      });
      // console.log(res[i]);//获取到与点击商品id一样的数据
      str = `
             <div class="particular-top-left">
          <div class="imgdet">
            <div class="imglist">
              <ul>
                <li class="active">
                  <img src="${res[i].src1}" alt="" />
                </li>
                <li class="active">
                  <img src="${res[i].src2}" alt="" />
                </li>
                <li class="active">
                  <img src="${res[i].src3}" alt="" />
                </li>
                <li class="active">
                  <img src="${res[i].src4}" alt="" />
                </li>
              </ul>
            </div>
            <div class="imgpart">
              <div class="pic">
                <img src="${res[i].src1}" alt="" />
                <div class="magnify"></div>
              </div>
              <div class="bigpic">
                <img src="${res[i].src1}" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="particular-top-right">
          <div class="particular-top-right-t">
            <div class="particular-top-right-t-1">
              ${res[i].names}
            </div>
            <div class="particular-top-right-t-2">
              ${res[i].introduction}
            </div>
          </div>
          <div class="particular-top-right-c">
            <div class="particular-top-right-c-01">
              <p>价格</p>
              <span>${res[i].price}</span>
            </div>
            <div class="particular-top-right-c-02">
              <div class="c-022">服务</div>
              <div class="c-023">
                <div>
                  <img src="/img/particular-r.png" />
                  <span>包邮</span>
                </div>
                <div>
                  <img src="/img/particular-r.png" />
                  <span>三方店铺</span>
                </div>
                <div>
                  <img src="/img/particular-r.png" />
                  <span>7天无理由</span>
                </div>
                <div>
                  <img src="/img/particular-r.png" />
                  <span>由福州来旺兄弟贸易有限公司发货并提供售后</span>
                </div>
              </div>
            </div>
          </div>
          <div class="particular-top-right-f">
            <div class="right-f1 right-f11 pr-btn" id="addCart" data-id="${res[i].id}">
              <a href="JavaScript::">加入购物车</a>
            </div>
            <div class="right-f1 right-f12" id="addCarts"><a>立即购买</a></div>
            <div class="right-f2 right-f12"><a href="#">收藏</a></div>
            <div class="right-f2 right-f12"><a href="#">客服</a></div>
          </div>
        </div>
            `;
      $(".particular-top").html(str);

      $(".particular-top-right-f")
        .children("#addCarts")
        .children("a")
        .on("click", function () {
          location.href = "cart.html";
        });

      particular(); //商品渲染后再使用放大镜的方法

      new List(); //购物车的单击
    },
  });

  class List {
    constructor() {
      this.right = $(".particular-top-right-f");
      this.addEvent(); //添加点击事件
    }
    addEvent() {
      //添加事件委托
      const that = this;
      this.right.on("click", "#addCart", function (eve) {
        that.id = $(this).attr("data-id");
        that.setData();
      });
    }
    setData() {
      this.proMsg = localStorage.getItem("proMsg")
        ? JSON.parse(localStorage.getItem("proMsg"))
        : [];

      let index = 0;
      this.proMsg.some((val, idx) => {
        index = idx;
        return val.proId === this.id;
      });

      if (this.proMsg.length >= 1) {
        let flag = false;
        let i;
        for (i = 0; i < this.proMsg.length; i++) {
          if (this.proMsg[i].id === this.id) {
            flag = true;
            break;
          }
        }
        if (flag) {
          this.proMsg[i].num++;
        } else {
          this.proMsg.push({
            id: this.id,
            num: 1,
            price: this.proMsg[index].price,
          });
        }
      } else {
        this.proMsg.push({
          id: this.id,
          num: 1,
          // price:this.proMsg[index].price
        });
      }

      localStorage.setItem("proMsg", JSON.stringify(this.proMsg));
    }
  }

  // 详情页面中的配件  放大镜
  function particular() {
    var ulobj = $(".imglist ul");
    var picimg = $(".imgpart .pic img");
    var objimg = $(".imgpart .bigpic img");
    ulobj.on("mouseenter", "li", function () {
      var imgsrc = $(this).children("img").attr("src");
      $(this).addClass("active").siblings().removeClass("active");
      picimg.attr("src", imgsrc);
      objimg.attr("src", imgsrc);
    });
    var pic = $(".imgpart .pic");
    var magnify = $(".imgpart .pic .magnify");
    var bigpic = $(".imgpart .bigpic");
    var objimg = $(".imgpart .bigpic img");
    pic.mousemove(function (e) {
      magnify.show();
      bigpic.show();
      var pagex = e.pageX;
      var pagey = e.pageY;
      var pictop = pic.offset().top;
      var picleft = pic.offset().left;
      var magnifyw = magnify.width();
      var magnifyh = magnify.height();
      var magnifytop = pagey - pictop - magnifyh / 2;
      var magnifyleft = pagex - picleft - magnifyw / 2;
      var picw = pic.width() - magnifyw;
      var pich = pic.height() - magnifyh;
      magnifytop = magnifytop < 0 ? 0 : magnifytop;
      magnifyleft = magnifyleft < 0 ? 0 : magnifyleft;
      magnifytop = magnifytop > pich ? pich : magnifytop;
      magnifyleft = magnifyleft > picw ? picw : magnifyleft;
      magnify.css({
        top: magnifytop,
        left: magnifyleft,
      });
      var minl = bigpic.width() - objimg.width();
      var mint = bigpic.height() - objimg.height();
      var objimgl = -magnifyleft * 2;
      var objimgt = -magnifytop * 2;
      objimgl = objimgl < minl ? minl : objimgl;
      objimgt = objimgt < mint ? mint : objimgt;
      objimg.css({
        top: objimgt,
        left: objimgl,
      });
    });
    pic.mouseleave(function () {
      magnify.hide();
      bigpic.hide();
    });
  }
});
